{% extends "base.html" %}

{% load comments diggpaginator %}

{% block title %}Liste des tickets{% endblock %}
{% block content_title %}Liste des tickets{% endblock %}
{% block image %}<img src="{{ MEDIA_URL }}images/oxygen/search.png" alt="search" />{% endblock %}

{% block extrajs %}
<script type="text/javascript" charset="utf-8">

    function hide_actions() {
        dojo.query("#widget_id_action-assigned_to, #widget_id_action-category, #widget_id_action-project, #widget_id_action-state, #widget_id_action-priority, #id_close_comment").forEach(function(tag) {
            dojo.style(tag, "display", "none");
        });
    }

    function show_selected_action(value) {
        var widget_name = "";
        switch (value) {
            case "action_change_assigned_to":
                widget_name = "widget_id_action-assigned_to";
                break;
            case "action_change_category":
                widget_name = "widget_id_action-category";
                break;
            case "action_change_project":
                widget_name = "widget_id_action-project";
                break;
            case "action_change_state":
                widget_name = "widget_id_action-state";
                break;
            case "action_change_priority":
                widget_name = "widget_id_action-priority";
                break;
            case "action_validate_tickets":
                widget_name = "id_validate_tickets";
                break;
            case "action_close_tickets":
                widget_name = "id_close_comment";
                break;
            default:
                hide_actions();
                return;
        }
        hide_actions();
        dojo.style(widget_name, "display", "inline-block");
    }

    dojo.addOnLoad(function() {

        // Selection des checkbox en masse
        dojo.connect(dojo.byId("select_all"), "onclick", function(evt) {
            if (dojo.byId("select_all")) {
                var val = dojo.byId("select_all").checked;

                dojo.query("input[type^='checkbox'][id^='ticket_select']").forEach(function(tag) {
                    tag.checked = val;
                    if (val)
                        dojo.addClass(tag.parentNode.parentNode, "selected");
                    else
                        dojo.removeClass(tag.parentNode.parentNode, "selected");
                });
            }
        });

        dojo.query("input[type^='checkbox'][id^='ticket_select']").forEach(function(tag) {
            dojo.connect(tag, "onchange", function() {
                if (tag.checked)
                    dojo.addClass(tag.parentNode.parentNode, "selected");
                else
                    dojo.removeClass(tag.parentNode.parentNode, "selected");
            });
        });

        // Gestion des actions
        dojo.connect(dijit.byId("id_action-actions"), "onChange", function(evt) {
            show_selected_action(dijit.byId("id_action-actions").attr("value"));
        });

        dojo.connect(dijit.byId("id_action-state"), "onChange", function(evt) {
            if (dijit.byId("id_action-state").attr("value") == {{ TICKET_STATE_CLOSED }}) {
                dojo.style("id_close_comment", "display", "inline-block");
            } else {
                dojo.style("id_close_comment", "display", "none");
            }
        });

        // Au chargement de la page, si une action est deja selectionnée, on affiche le combo associé
        if (dijit.byId("id_action-actions"))
            show_selected_action(dijit.byId("id_action-actions").attr("value"));
    });
</script>
{% endblock extrajs %}

{% block content %}
<form method="post" action="?page=1" id="list_form">{% csrf_token %}
{% block list_filters %}
<fieldset class="form">
  <legend>Filtrage</legend>
    <table class="search">
        <tr>
            <th>{{ form.title.label_tag }}</th>
            <td>{{ form.title }}</td>
            <th>{{ form.client.label_tag }}</th>
            <td>{{ form.client }}</td>
            <th>{{ form.category.label_tag }}</th>
            <td>{{ form.category }}</td>
        </tr>
        <tr>
            <th>{{ form.project.label_tag }}</th>
            <td>{{ form.project }}</td>
            <th>{{ form.state.label_tag }}</th>
            <td>{{ form.state }}</td>
            <th>{{ form.priority.label_tag }}</th>
            <td>{{ form.priority }}</td>
        </tr>
        <tr>
            <th>{{ form.assigned_to.label_tag }}</th>
            <td>{{ form.assigned_to }}</td>
            <th>{{ form.text.label_tag }}</th>
            <td>{{ form.text }}</td>
            <th>{{ form.opened_by.label_tag }}</th>
            <td>{{ form.opened_by }}</td>
        </tr>
        <tr>
            <th>{{ form.keywords.label_tag }}</th>
            <td>{{ form.keywords }}</td>
            <th>{{ form.contact.label_tag }}</th>
            <td>{{ form.contact }}</td>
            <th></th>
            <td></td>
        </tr>

    </table>
    <button type="reset" dojoType="dijit.form.Button" iconClass="dijitIconClear">Annuler
        <script type="dojo/method" event="onClick">
            dojo.doc.location = "?reset=1";
        </script>
    </button>
    <button type="submit" dojoType="dijit.form.Button" name="validate-filters" value="1" iconClass="dijitIconSearch">Rechercher
        <script type="dojo/method" event="onClick">
            dojo.byId("list_form").action = "?page=1"
        </script>
    </button>
    <button type="button" dojoType="dijit.form.Button" iconClass="dijitIconNewTask">Créer une nouvelle vue
        <script type="dojo/method" event="onClick">
            dojo.doc.location = "{% url ticket_list_view %}?reset=1";
        </script>
    </button>
</fieldset>
{% endblock list_filters %}
</form>

{% if tickets.object_list %}

{% if tickets.paginator.num_pages > 1 %}
{% diggpaginator tickets %}
{% endif %}

<form method="post" name="action_form">{% csrf_token %}
{{ action_form.non_field_errors }}
{{ action_form.comment }}

<!-- Tooltips -->
{% for row in tickets.object_list %}
    <div dojoType="dijit.Tooltip" connectId="ticket_line_{{ forloop.counter }}" position="above" style="display: none;">
        {% if row.alarm %}
            <h3>Alarme le {{ row.alarm.date_open|date:"d/m/Y à H:i" }} par {{ row.alarm.user_open }}</h3>
            {{ row.alarm.reason }}
            </h3>
        {% endif %}
        <h3>{{ row.title|wordwrap:80 }}</h3>
        {{ row.text|wordwrap:80|linebreaks }}
    </div>
    {% for child in row.enfants %}
        <div dojoType="dijit.Tooltip" connectId="ticket_child{{ forloop.parentloop.counter }}_line_{{ forloop.counter }}" position="above" style="display: none;"><h3>{{ child.title|wordwrap:80 }}</h3>{{ child.text|wordwrap:80|linebreaks }}</div>
    {% endfor %}
{% endfor %}
    
<table class="resultat trafiquable exportables" id="ticket_result_all">
<tr class="form">
   <td colspan="12">
        {{ action_form.actions }} {{ action_form.assigned_to }} {{ action_form.category }} {{ action_form.project }} {{ action_form.state }} {{ action_form.priority }}
        <div id="id_close_comment" style="display: none;">
            <div dojoType="dijit.form.DropDownButton" >
                <span>Commentaire de clotûre</span>
                <div dojoType="dijit.TooltipDialog">
                    <textarea cols="50" rows="10" id="id_tooltip_comment"></textarea>
                    <script type="dojo/method" event="onClose">
                            dijit.byId("id_action-comment").attr("value", dojo.byId("id_tooltip_comment").value);
                    </script>
                </div>
            </div>
        </div>
        <button dojoType="dijit.form.Button" type="submit" name="validate-actions" id="validate-actions" value="1">Valider
            <script type="dojo/method" event="onClick">
                // TODO Tester les champs obligatoire avant de valider
                return true;
            </script>
        </button>
    </td>
 </tr>
<thead>
<tr>
    <th style="text-align: center;"><input type="checkbox" id="select_all" /></th>
    <th><a href="?sort=id&sort_order={{ sort_order }}">Id</a></th>
    <th><a href="?sort=client&sort_order={{ sort_order }}">Client</a></th>
    <th><a href="?sort=category&sort_order={{ sort_order }}">Catégorie</a></th>
    <th><a href="?sort=project&sort_order={{ sort_order }}">Projet</a></th>
    <th><a href="?sort=title&sort_order={{ sort_order }}">Titre</a></th>
    <th><a href="?sort=nb_comments&sort_order={{ sort_order }}"><img src="{{ MEDIA_URL }}images/comment.png" /></a></th>
    <th><a href="?sort=nb_appels&sort_order={{ sort_order }}"><img src="{{ MEDIA_URL }}images/phone.png" /></a></th>
    <th><a href="?sort=contact&sort_order={{ sort_order }}">Contact</a></th>
    <th><a href="?sort=last_modification&sort_order=1">M.à.J.</a></th>
    <th><a href="?sort=opened_by&sort_order={{ sort_order }}">Ouvert par</a></th>
    <th><a href="?sort=assigned_to&sort_order={{ sort_order }}">Assigné à</a></th>
</tr>
</thead>
<tbody>
{% for row in tickets.object_list %}
    <tr class="bigrow {% cycle 'row1' 'row2' as rowcolor %}" id="ticket_line_{{ forloop.counter }}">
        <td class="bigrow"><input type="checkbox" name="ticket_checked" id="ticket_select_{{ forloop.counter }}" value="{{ row.pk }}" /></td>
        <td class="bigrow" style="width: 60px;{{ row.close_style }}{{ row.priority_back_style }}" rowspan="{{ row.enfants|length|add:'1' }}">
            {% if row.alarm %}<img src="{{ MEDIA_URL }}images/important.png" alt="[alarme]" />{% endif %}
            {% if row.file %}<img src="{{ MEDIA_URL }}images/attachment.png" alt="[attach]" />{% endif %}
            <a style="{{ row.priority_text_style }}" href="{% url ticket_modify row.id %}">{{ row.id }}</a>
        </td>
        <td class="bigrow" style="width: 200px;">{% if row.client %}{{ row.client }}{% endif %}</td>
        <td class="bigrow" style="width: 100px;">{{ row.category }}</td>
        <td class="bigrow" style="width: 100px;">{% if row.project %}{{ row.project }}{% endif %}</td>
        <td class="bigrow" style="min-width: 250px;{{ row.close_style }}"><a href="{% url ticket_modify row.id %}">{{ row.title|truncatewords:8 }}</a></td>
        <td class="bigrow">{{ row.nb_comments|default:"" }}</td>
        <td class="bigrow">{{ row.nb_appels|default:"" }}</td>
        <td class="bigrow">{{ row.contact }}</td>
        <td class="bigrow">{{ row.last_modification|date:'d/m/y H\hi' }}</td>
        <td class="bigrow">{{ row.opened_by }}</td>
        <td class="bigrow">{{ row.assigned_to }}</td>
    {% for child in row.enfants %}
        </tr>
        <tr class="{{ rowcolor }}" id="ticket_child{{ forloop.parentloop.counter }}_line_{{ forloop.counter }}">
            <td><input type="checkbox" name="ticket_checked" id="ticket_child{{ forloop.parentloop.counter}}_select_{{ forloop.counter }}" value="{{ child.pk }}" /></td>
            <td colspan="11" class="rowchild"><img src="{{ MEDIA_URL }}images/oxygen/code-class.png" alt="-->" />&nbsp;<span style="{{ child.close_style }}"><a href="{% url ticket_modify row.id %}#child{{ child.id }}">{{ child.title|truncatewords:8 }}</a></span></td>
        </tr>
    {% endfor %}
    {% if not row.enfants %}</tr>{% endif %}
{% endfor %}
</tbody>
</table>
</form>

{% if tickets.paginator.num_pages > 1 %}
{% diggpaginator tickets %}
{% endif %}

{% else %}
<h3>Aucun résultat</h3>
{% endif %}

{% if show_ticket_seen %}
<!-- Filtrage supplementaire -->
<br />
<div style="" class="form">
  <script type="text/javascript">
    function mark_all_ticket_seen() {
        dojo.xhrGet({url: "{% url ajax_mark_all_ticket_seen %}",
            handleAs: "text",
            load: function(data) { console.log(data); }
        });
    }
    function reset_all_ticket_seen() {
        dojo.xhrGet({url: "{% url ajax_reset_all_ticket_seen %}",
            handleAs: "text",
            load: function(data) { console.log(data); }
        });
    }
  </script>
  <span>Cacher: </span>
    <div dojoType="dijit.form.Button" onclick="reset_all_ticket_seen();" iconClass="dijitIconDelete">Remise a zero</div>
    <div dojoType="dijit.form.Button" onclick="mark_all_ticket_seen();" iconClass="dijitIconFilter">Marquer tous comme vu</div>
</div>
{% endif %}

{% endblock content %}
